<template>
	<view class="content">
		<!-- 头部 -->
		<!-- <view class="header" style="margin-top: 50rpx;">
			<uni-nav-bar left-icon="back" left-text="返回" title="提交订单" color='#3b71d2' @clickLeft="back"></uni-nav-bar>
		</view> -->
		<!-- 配送地址 -->
		<view class="Distribution_address" @tap='select_address' v-if="Receiving_address.length==0&&radio_value==1">
			<view class="left">
				请新增地址！
			</view>
			<view class="right">
				<image src="../../static/fanhui.png" mode=""></image>
			</view>
		</view>
		<view class="Distribution_address" v-if="radio_value==1&&item.is_default==1" v-for="(item,index) in Receiving_address"
		 @tap='select_address'>
			<view class="left">
				<view class="top">
					<view class="left">
						默认
					</view>
					<view class="right">
						{{item.province}} {{item.city}} {{item.district}}
					</view>
				</view>
				<view class="centers">
					{{item.address}}
				</view>
				<view class="fot">
					{{item.consignee}} {{item.mobile}}
				</view>
			</view>
			<view class="right">
				<image src="../../static/fanhui.png" mode=""></image>
			</view>
		</view>
		<!-- 自提地址 -->
		<view class="Self_address" v-if="radio_value==2">
			<view class="left">
				<view class="title">
					{{PickupPointInfo.name}}
				</view>
				<view class="text">
					地址：{{PickupPointInfo.address}}
				</view>
				<view class="text">
					拨打电话：{{PickupPointInfo.phone}}
				</view>
				<view class="text" @tap="select">
					自提时间：<text style="color: #007AFF;">请选择</text>
					<image src="../../static/fanhui.png" mode=""></image>
				</view>
				<view class="text">
					<!-- 时间： -->
					{{shipping_month}}-{{shipping_starttime}}-{{shipping_endtime}}
				</view>
			</view>
			<!-- <view class="right">
				<image class="img1" src="../../static/22.png" mode="scaleToFill"></image>
				<image class="img2" src="../../static/23.png" mode="scaleToFill"></image>
			</view> -->
		</view>
		<view class="img">
			<image src="../../static/img/row.png" mode=""></image>
		</view>
		<!-- 单选钮 -->
		<view class="radio">
			<radio-group @change="radioChange">
				<label>
					<view>
						<radio value="1" color='#39B54A' style="transform:scale(0.7)" checked="true" />配送
					</view>
					<view>
						<radio value="2" color='#39B54A' style="transform:scale(0.7)" />自提
					</view>
				</label>
			</radio-group>
		</view>
		<!-- 定制T恤 -->
		<view class="center">
			<view class="left">
				<image :src="data.series_goods_image" mode=""></image>
			</view>
			<view class="right">
				<view class="title">
					{{GoodsInfo.goods_name}}
				</view>
				<view class="one">
					{{GoodsInfo.ColorInfo.color_name}}，{{GoodsInfo.GoodsSeries.type_name}}，{{GoodsInfo.GoodsSku.sku_name}}码，{{GoodsInfo.goods_number}}件
				</view>
				<view class="price">
					￥{{GoodsInfo.GoodsSku.price}}
				</view>
				<view class="text">
					不支持7天无理由退货
				</view>
			</view>
		</view>
		<view class="cu-form-group margin-top">
			<view class="title">订单备注：</view>
			<input placeholder="最多填写30字哦~" name="input" :value="remark" @input='change_remark'></input>
		</view>
		<!-- 金额 -->
		<view class="three">
			<view class="li" @tap="coupon()">
				<view class="text">
					商品金额
				</view>
				<view class="text">
					{{data.TotalGoodsMoney}}
				</view>
			</view>
			<view class="li" @tap="coupon()">
				<view class="text">
					商品优惠
				</view>
				<view class="text" style="color:#3B71D2;">
					{{CouponMoney}}
					<image src="../../static/fanhui.png" mode=""></image>
				</view>
			</view>
			<view class="li">
				<view class="text">
					运费
				</view>
				<view class="text">
					{{GoodsInfo.shipping_fee}}
				</view>
			</view>
			<view class="li">
				<view class="text">
					合计
				</view>
				<view class="text">
					{{data.TotalGoodsMoney-CouponMoney}}.00
				</view>
			</view>
		</view>
		<!-- 付款 -->
		<view class="pay">
			<view class="left">
				已省：<text>￥{{CouponMoney}}</text>
			</view>
			<view class="left">
				实付：<text>￥{{data.TotalGoodsMoney-CouponMoney}}.00</text>
			</view>
			<view class="bot" @tap='Pay_now'>
				立即支付
			</view>

		</view>
		<!-- 底部 -->
		<view class="footer">
			<image src="../../static/fot.png" mode=""></image>
		</view>
		<!-- 时间弹框 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="top">
					选择自提时间
				</view>
				<view class="fot">
					
						<view class="lefts">
							<view class="li" v-for="(item,index) in month_data" @tap="select_day(index,item)" :class="index==day_current?'active':''" :key="index">
								<!-- <text v-if="day+3==30&&((month+1)==2||(month+1)==4||(month+1)==6||(month+1)==9||(month+1)==11)">{{month+2}}月{{i}}日</text>
								<text v-if="day+3==31&&((month+1)==1||(month+1)==3||(month+1)==5||(month+1)==7||(month+1)==8||(month+1)==10||(month+1)==12)">{{month+2}}月{{i}}日</text>
								<text v-if="(day+index+3)>=31&&((month+1)==2||(month+1)==4||(month+1)==6||(month+1)==9||(month+1)==11)">{{month+2}}月{{i++}}日</text>
								<text v-if="(day+index+3)>=32&&((month+1)==1||(month+1)==3||(month+1)==5||(month+1)==7||(month+1)==8||(month+1)==10||(month+1)==12)">{{month+2}}月{{i}}日</text>
								<text v-if="(day+3)!=31||(day+3)!=30||(day+index+3)!=30||(day+index+3)!=31">{{month+1}}月{{day+index+3}}日</text> -->
							{{item.month}}月{{item.day}}日
							</view>
						</view>
						<view class="rights">
							<view class="li" v-for="(item,index) in PickupPointInfo.time_slot" @tap="select_time(index,item)" :class="index==time_current?'active':''":key="index">
								{{item.start}}-{{item.end}}
								<image src="../../static/gou.png" mode="" v-if="index==time_current"></image>

							</view>
						</view>
				</view>
			</view>
		</uni-popup>
		<!-- 优惠卷 -->
		<uni-popup ref="popups" type="bottom">
			<view class="coupon">
				<view class="top">
					选择优惠券
				</view>
				<radio-group name="" style="background-color: #EEEEEE;" @change="coupon_radio">
					<label>
						<scroll-view scroll-y="true" style="height: 500rpx;">
							<view class="list" v-for="(item,index) in CouponList">
								<radio :value="item" />
								<view class="li">
									<view class="left">
										<view class="tops">
											{{item.coupon_name}}
										</view>
										<view class="centers">
											满{{item.at_least}}元可用
										</view>
										<view class="fot" v-if="item.term_of_validity_type==0">
											有效期：{{item.start_time}}至{{item.end_time}}
										</view>
										<view class="fot" v-if="item.term_of_validity_type==1">
											领取后：{{item.fixed_term}}天内有效
										</view>
									</view>
									<view class="right">
										{{item.money}}<text style="font-size: 30rpx;">元</text>
									</view>
								</view>
							</view>
						</scroll-view>
					</label>
				</radio-group>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		data() {
			return {
				id: null,
				radio_value: 1,
				month: '', //月
				day: '', //日
				day_current: -1, //日期
				time_current: -1, //时间
				i:0,
				data: {
					TotalGoodsMoney: null,
					TotalMoney: null,
				}, //所有数据
				CouponList: [], //优惠卷列表
				PickupPointInfo: {}, //自提信息 	
				GoodsInfo: {
					goods_name: null,
					ColorInfo: {
						color_name: null
					},
					GoodsSeries: {
						type_name: null
					},
					GoodsSku: {
						price: null,
					},
					shipping_fee: {},



				}, //商品信息	
				all_data: {
					series_image: {}
				}, //所有的数据
				CouponMoney: null, //优惠金额
				shipping_starttime: '', //自提开始时间
				shipping_endtime: '', //自提结束时间
				shipping_month: '', //日期
				Receiving_address: [], //收货地址
				coupon_id: '',
				address_id: '', //地址id
				remark: '', //备注
				month_data: [], //时间

			}
		},
		onShow() {
			var uid = uni.getStorageSync('uid');
			this.infoprop('/Address/AddressList', 'POST', {
				Uid: uid
			}, (res) => {
				this.Receiving_address = res.data.data;
				for (var i = 0; i < res.data.data.length; i++) {
					if (res.data.data[i].is_default == 1) {
						this.address_id = res.data.data[i].id;
					}
				}
				console.log(this.address_id)

			})
		},
		onLoad(e) {
			// var json = String(e.data);
			// json = JSON.parse(json);
			//var json = JSON.parse(decodeURIComponent(e.data)); 

			var json = uni.getStorageSync('href');
			//json = JSON.parse(json);

			this.id = json.id;
			this.all_data = json;
			this.data = json.res;
			this.CouponList = json.res.CouponList;
			this.CouponMoney = json.res.CouponMoney;
			this.PickupPointInfo = json.res.PickupPointInfo;
			this.GoodsInfo = json.res.GoodsInfo;
			console.log(json);

		},
		methods: {
			// 返回上一级
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			radioChange(e) {
				this.radio_value = e.target.value
			},
			select() {
				this.$refs.popup.open();
				var date = new Date();
				var month = date.getMonth();
				var day = date.getDate();
				this.month = month;
				this.day = day;
				var j = 1;
				for (var index=0;index<7;index++) {
					 var json = {};
					if (this.day==31&&(month + 1 == 1 || month + 1 == 3 || month + 1 == 5 || month + 1 == 7 || month + 1 == 8 || month + 1 == 10 ||month + 1 == 12)){
						json.month=this.month+2;
						json.day=this.day+index+3;
					} else if (this.day==30&&(month + 1 == 4 || month + 1 == 6 || month + 1 == 9 || month + 1 == 11 || month + 1 == 8 || month + 1 == 10 )){
						json.month=this.month+2;
						json.day=this.day+index+3;
						console.log(12)
					} else if((this.day+index+3>=32)&&(month + 1 == 1 || month + 1 == 3 || month + 1 == 5 || month + 1 == 7 || month + 1 == 8 || month + 1 == 10 ||
						month + 1 == 12)){
							json.month=this.month+2;
							json.day=j++;
						}else if (((this.day+index+3))>=31&&(month + 1 == 4 || month + 1 == 6 || month + 1 == 9 || month + 1 == 11 || month + 1 == 8 || month + 1 == 10 )){
						json.month=this.month+2;
						json.day=j++;
					}else{
						json.month=this.month+1;
					 	json.day=this.day+index+3;
					 }
					 this.month_data.push(json);
				}
			},
			select_day(index,item) {
				this.shipping_month = item.month + '-' + item.day;
				this.day_current = index;
				//console.log(this.Date)
			},
			select_time(index, item) {
				this.shipping_starttime = item.start;
				this.shipping_endtime = item.end;
				this.time_current = index;
				//console.log(this.shipping_starttime)

			},
			coupon() {
				this.$refs.popups.open();
			},
			coupon_radio(e) {
				this.CouponMoney = e.detail.value.money;
				this.coupon_id = e.detail.value.coupon_id
				//console.log(this.coupon_id);
			},
			select_address() {
				uni.navigateTo({
					url: '../address/address'
				})
			},
			change_remark(e) {
				this.remark = e.detail.value;
				//console.log(this.remark)
			},
			Pay_now(data) {
				var uid = uni.getStorageSync('uid');
				var json = {
					Uid: uid,
					GoodsId: this.GoodsInfo.goods_id,
					sku_id: this.GoodsInfo.GoodsSku.sku_id,
					goods_number: this.GoodsInfo.goods_number,
					color_id: this.GoodsInfo.ColorInfo.id,
					series_id: this.GoodsInfo.GoodsSeries.id,
					pic_id: this.data.pic_id,
					coupon_id: this.coupon_id,
					series_image: this.all_data.series_image,
					series_goods_image: this.data.series_goods_image,
					remark: this.remark,
					shipping_type: this.radio_value,
					address_id: this.address_id,
					shipping_month: this.shipping_month,
					shipping_starttime: this.shipping_starttime,
					shipping_endtime: this.shipping_endtime,
				}

				//alert(JSON.stringify(json))

				this.infoprop('/Order/Done', 'POST', json, (ress) => {

					if (ress.data.status == 0) {
						uni.showModal({
							showCancel: false,
							content: ress.data.msg
						});

						return false
					}

					//alert(JSON.stringify(ress))
					// uni.requestPayment({
					// 	appId: ress.data.data.param.appId,
					// 	nonceStr: ress.data.data.param.nonceStr,
					// 	package: ress.data.data.param.package,
					// 	paySign:ress.data.data.param.paySign,
					// 	signType: ress.data.data.param.signType,
					// 	timeStamp:ress.data.data.param.timeStamp,
					// 	success: (res1) => {
					// 		uni.showToast({
					// 			title: '支付成功！',
					// 			icon: 'none'
					// 		});
					// 		uni.navigateTo({
					// 			url: '../order/order'
					// 		});

					// 	}
					// });
					WeixinJSBridge.invoke(
						'getBrandWCPayRequest', {
							"appId": ress.data.data.param.appId, //公众号名称，由商户传入     
							"timeStamp": ress.data.data.param.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": ress.data.data.param.nonceStr, //随机串     
							"package": ress.data.data.param.package,
							"signType": ress.data.data.param.signType, //微信签名方式：     
							"paySign": ress.data.data.param.paySign //微信签名 
						},
						function(res) {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								uni.showToast({
									title: '支付成功！',
									icon: 'none'
								});
								uni.navigateTo({
									url: '../order/order'
								});
							}
						});
				})
			}

		},
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		//弹框
		.popup {
			width: 100%;
			height: 500rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 20px 20px 0px 0px;
			.top {
				width: 100%;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(59, 113, 210, 1);
				border-bottom: 1px solid #EEEEEE;
				text-align: center;
				padding: 20rpx 0;
			}
			.fot {
				width: 100%;
				display: flex;
				justify-content: center;

				.lefts {
					width: 40%;
					height: 100%;
					background-color: #EEEEEE;

					.li {
						font-size: 35rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(73, 72, 72, 1);
						text-align: center;
						padding: 8rpx 0;
					}

					.active {
						color: rgba(59, 113, 210, 1);
					}
				}

				.rights {
					width: 60%;
					.li {
						width: 100%;
						display: flex;
						align-items: center;
						font-size: 35rpx;
						font-family: PingFang SC;
						font-weight: 500;
						//color: rgba(59, 113, 210, 1);
						border-bottom: 1px solid #EEEEEE;
						padding: 20rpx 0;
						margin-left: 50rpx;

						image {
							margin-left: 20rpx;
							width: 30rpx;
							height: 30rpx;

						}

					}

					.active {
						color: rgba(59, 113, 210, 1);
					}
				}
			}
		}

		.coupon {
			width: 100%;
			height: 600rpx;
			position: fixed;
			bottom: 0;
			background: rgba(255, 255, 255, 1);
			border-radius: 20px 20px 0px 0px;

			.top {
				width: 100%;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #757373;
				border-bottom: 1px solid #EEEEEE;
				text-align: center;
				padding: 20rpx 0;
			}

			.list {
				display: flex;
				justify-content: space-around;
				align-items: center;
			}

			.li {
				margin: auto;
				width: 90%;
				height: 200rpx;
				background: url(../../static/img/6.png) no-repeat;
				background-size: 100% 100%;
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;

				.left {
					.tops {
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						padding-left: 10rpx;
					}

					.centers {
						font-size: 35rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						padding: 20rpx 10rpx;
					}

					.fot {
						font-size: 25rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
						padding: 5rpx 10rpx;
					}
				}

				.right {
					font-size: 50rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: rgba(255, 255, 255, 1);
					padding-top: 40rpx;
					padding-right: 40rpx;
				}
			}
		}

		.img {
			font-size: 0;

			image {
				width: 100%;
				height: 5rpx;
			}
		}

		//单选
		.radio {
			label {
				display: flex;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(73, 72, 72, 1);
				line-height: 36px;

				view {
					margin: 20rpx 10rpx;
				}
			}
		}

		// 配送地址
		.Distribution_address {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 30rpx;

			.left {
				.top {
					display: flex;

					.left {
						background: rgba(59, 113, 210, 1);
						border-radius: 10rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						padding: 5rpx 20rpx;
					}

					.right {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
						margin-left: 20rpx;
					}
				}

				.centers {
					font-size: 35rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(59, 113, 210, 1);
					margin-top: 10rpx;
				}

				.fot {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
					margin-top: 10rpx;
				}
			}

			.right {
				image {
					width: 30rpx;
					height: 40rpx;
				}
			}
		}

		//自提地址
		.Self_address {
			width: 100%;
			height: 400rpx;
			//background: url(../../static/1499.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			//justify-content: space-between;
			//align-items: center;

			.left {
				.title {
					font-size: 35rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(59, 113, 210, 1);
					padding: 5rpx 0rpx;
					padding-left: 30rpx;
				}

				.text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
					padding: 10rpx 0rpx;
					padding-left: 30rpx;
					display: flex;
					align-items: center;

					image {
						width: 20rpx;
						height: 30rpx;
						margin-left: 20rpx;
					}
				}
			}

			.right {
				margin: auto;

				.img1 {
					width: 200rpx;
					height: 80rpx;
				}

				.img2 {
					width: 190rpx;
					height: 200rpx;
				}
			}
		}

		//定制
		.center {
			display: flex;
			justify-content: space-around;
			border-top: 1rpx solid #EEEEEE;
			border-bottom: 1rpx solid #EEEEEE;
			padding: 30rpx 0;

			.left {
				image {
					width: 300rpx;
					height: 250rpx;
				}
			}

			.right {
				.title {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(73, 72, 72, 1);
					padding: 10rpx 0;
				}

				.one {
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(174, 172, 172, 1);
					padding: 10rpx 0;
				}

				.price {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(59, 113, 210, 1);
					letter-spacing: 5rpx;
					padding: 10rpx 0;
				}

				.text {
					background: rgba(174, 172, 172, 1);
					opacity: 0.4;
					border-radius: 12px;
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(73, 72, 72, 1);
					text-align: center;
					margin-top: 20rpx;
				}

			}
		}

		//备注

		.cu-form-group {
			background-color: #ffffff;
			padding: 1upx 30upx;
			display: flex;
			align-items: center;
			min-height: 100upx;
			justify-content: space-between;
			color: #808080;
		}

		.cu-form-group+.cu-form-group {
			border-top: 1upx solid #eee;
		}

		.cu-form-group .title {
			text-align: justify;
			padding-right: 30upx;
			font-size: 30upx;
			position: relative;
			height: 60upx;
			line-height: 60upx;
		}

		.cu-form-group input {
			flex: 1;
			font-size: 30upx;
			color: #555;
			padding-right: 20upx;
		}

		.cu-form-group>text[class*="cuIcon-"] {
			font-size: 36upx;
			padding: 0;
			box-sizing: border-box;
		}

		// 金额
		.three {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #EEEEEE;

			.li {
				display: flex;
				justify-content: space-between;

				.text {
					padding: 10rpx 30rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(73, 72, 72, 1);

					image {
						width: 20rpx;
						height: 25rpx;
						margin-left: 20rpx;
					}
				}
			}
		}

		//付款
		.pay {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 150rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.08);
			padding: 30rpx 0;
			// position: fixed;
			// bottom: 0;
			width: 100%;

			.left {
				font-size: 25rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(174, 172, 172, 1);

				text {
					font-size: 35rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(59, 113, 210, 1);
				}
			}

			.bot {
				background: linear-gradient(218deg, rgba(11, 186, 251, 0.81), rgba(66, 133, 236, 0.81));
				box-shadow: 0px 3px 6px 0px rgba(65, 129, 231, 0.51);
				border-radius: 37rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				padding: 15rpx 40rpx;
			}
		}

		.footer {

			//margin-top: 20rpx;
			image {
				width: 100%;
				height: 200rpx;
			}
		}

	}
</style>
